<script>
import {defineAsyncComponent} from "vue";

export default {
  name: 'ProcessTree',
  components: {
    Root: defineAsyncComponent(() => import('./node/RootNode.vue')),
    Approval: defineAsyncComponent(() => import('./node/ApprovalNode.vue')),
    Task: defineAsyncComponent(() => import('./node/TaskNode.vue')),
    Gateway: defineAsyncComponent(() => import('./node/GatewayNode.vue'))
  },
  props: {
    config: {
      required: true,
      type: Object,
      default: () => {
        return []
      }
    }
  }
}
</script>

<template>
  <div class="w-process">
    <template v-for="node in config" :key="node.id + node.type">
      <component v-model="node.name" :branch="node.branch" :is="node.type.toLowerCase()" />
    </template>
    <div class="w-process-end">流程结束</div>
  </div>
</template>

<style lang="less" scoped>
.w-process {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  .w-process-end {
    padding: 10px;
    border-radius: 5px;
    background: @node-line-color;
  }
}
</style>
